import React, { useEffect, useState } from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import { CloseOutline, MoreOutline, SearchOutline } from "antd-mobile-icons";
import "./main.modules.less";

export default function Main(props) {
  // console.log(props);
  const [title, setTitle] = useState("");
  const { name, children } = props;

  useEffect(() => {
    if (name) {
      setTitle(name);
    }
  }, []);

  const back = () =>{
    // 返回上一页
    props.history.goBack();

  }
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        {/* <SearchOutline /> */}
        <MoreOutline />
      </Space>
    </div>
  );
  return (
    <div className="main-wrapper">
      <NavBar right={right} onBack={back}>
        {title}
      </NavBar>
      <div className="main-content">{children}</div>
    </div>
  );
}
